iT邦幫忙

2023 iThome 鐵人賽

DAY 8
0
Cloud Native

雲端時代,搬遷WordPress自建網站到AWS系列 第 8

Day8 - WordPress表單外掛:WPForms

  • 分享至 

  • xImage
  •  

我們的汪喵館有一個頁面是可以讓好心人抖內贊助我們好改善汪喵們的生活品質的,而這個頁面需要一個表單外掛好讓這些網站使用者可以填寫抖內的相關資訊。

我們來到WP的外掛頁面,搜索『WPForms』然後點擊啟用。
https://ithelp.ithome.com.tw/upload/images/20230912/201618324EaVs3CjBl.png

WPforms是一款功能強大且易於使用的表單外掛,用於創建各種不同類型的表單,從簡單的聯繫表單到更複雜的調查和訂單表單,超過800種模板。

第一步,我們先來創建個新表單~ 在左側點擊WPForms的『Add New』。
https://ithelp.ithome.com.tw/upload/images/20230912/20161832DIGecwXTWU.png

為抖內頁面要使用的表單命名,然後我們選擇使用最基礎的Simple Contact Form,點擊『Use Template』。
https://ithelp.ithome.com.tw/upload/images/20230912/20161832RymNw2kBOm.png

進入表單編輯頁面,在右側點擊對應區域後,可在左側進行編輯與調整。
https://ithelp.ithome.com.tw/upload/images/20230912/20161832y8v9yccUzL.png

如果想添加新的區域,在Add Fields欄將想要新增到表單的區域拖放到右側的預覽表單。
https://ithelp.ithome.com.tw/upload/images/20230912/20161832CvWyqyxFtf.png

表單都編輯完後,點擊上方的『Save』進行保存,然後點叉叉退出。
https://ithelp.ithome.com.tw/upload/images/20230912/20161832QUfYLrPJnC.png

在Settings的Notifications頁面可以做在表單送出後email的收發設定。
https://ithelp.ithome.com.tw/upload/images/20230912/20161832sPNT3rRDwg.png

在Confirmations頁面設定提交表單後的表現方式。
https://ithelp.ithome.com.tw/upload/images/20230912/20161832YT12RsDoaV.png

接下來我們要將剛才製作的表單放到抖內頁面,在左側找到『頁面』選項,然後點擊『抖內』進行編輯。
https://ithelp.ithome.com.tw/upload/images/20230912/201618323EWgfcibGr.png

點擊+號,然後點擊瀏覽全部。
https://ithelp.ithome.com.tw/upload/images/20230912/20161832bY72r6gxH3.png

輸入wp然後選擇下方的WPForms。https://ithelp.ithome.com.tw/upload/images/20230912/20161832v7gz9dF3nB.png

點開選項欄,選擇剛才創建的表單。
https://ithelp.ithome.com.tw/upload/images/20230912/20161832ycwKXt2krq.png

爲了可以讓WPForms可以和MySQL資料庫互連存取,我們在外掛頁面搜索wpformsdb,點擊『立即安裝』,然後直接啟用。
https://ithelp.ithome.com.tw/upload/images/20230912/20161832uTsl8EbLq1.png

可以從左側欄中看到WPForms DB,點擊進入可看到表單的狀況,每一筆表單被填寫就會在Count中計數。
https://ithelp.ithome.com.tw/upload/images/20230912/20161832VPRmoPAOeD.png

點擊想要查看的表單,就可以看到使用者所填寫過的資料。也可以點擊『Export CSV』將資料匯出。
https://ithelp.ithome.com.tw/upload/images/20230912/201618320W3EqUaN77.png

點進去也可看到比較直觀的畫面。
https://ithelp.ithome.com.tw/upload/images/20230912/20161832yviLZrVgtp.png

我們切換到phpMyAdmin的頁面,點擊進入『wp_wpforms_db』,就可以看到資料已匯入MySQL資料庫中了~
https://ithelp.ithome.com.tw/upload/images/20230912/20161832jdxNdGUzkY.png


上一篇
Day7 - WordPress操作簡介
下一篇
Day9 - phpMyAdmin操作簡介
系列文
雲端時代,搬遷WordPress自建網站到AWS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言